<template>
	<view class="container">
		<view class="head">
			<!-- <view class="fisze-24 line-gray-3">欢迎开启FENDI CLUB 精酿啤酒之旅~</view> -->
			<view class="fisze-24 line-gray-3">{{ stock.wxTitle || '' }}</view>
			<view class="user-panel">
				<view class="not-logged-in" v-if="!isLogin || userInfo.id === 0">
					<u-button v-if="system.app === 'alipay'" @click="integrals" type="primary" :plain="true">成为会员</u-button>
					<button v-else @click="integrals" type="primary" plain="true">成为会员</button>
				</view>
				<view v-else>
					<view class="is-user">
						<view class="tips">
							<image style="width: 100%; height: 100%" :src="userBalance.avatarImage" @click="$u.route('/pages/user/information/information')" />
						</view>
						<view class="user-info">
							<view style="font-size: 34rpx">
								<text style="margin-right: 10rpx; font-weight: 600">{{ userBalance.nickName }}</text>
								<image style="width: 35rpx; height: 35rpx" src="@/static/images/component/VIP.png"></image>
								<text style="margin-left: 10rpx; font-size: 22rpx; color: #919191">{{ userBalance.gradeName }}</text>
							</view>
							<view style="font-size: 24rpx; margin-top: 10rpx">{{ userInfo.mobile }}</view>
							<view style="font-size: 24rpx" class="mt-10">NO.{{ userInfo.number }}</view>
						</view>

						<view class="user-code" style="color: #edac2f" @click="isShow = true">
							<image class="icon" src="@/static/icon/二维码.svg"></image>
							<view style="text-align: center; color: black; font-size: 24rpx">会员码</view>
							<u-popup :show="isShow" mode="center" closeOnClickOverlay closeable @close="isShow = false">
								<view class="fisze-24 mt-20" style="padding-top: 100rpx; height: 300rpx">
									<w-barcode v-if="isShow" :options="options" />
									<view class="mt-10 text-align-center">{{ userInfo.number || '--' }}</view>
								</view>
							</u-popup>
						</view>
					</view>

					<view class="member-info">
						<view class="member-item">
							<view style="font-weight: 600">{{ userBalance.point }}</view>
							<view style="margin-top: 20rpx; display: flex; align-items: center">
								<image src="@/static/images/component/jifen-L.png"></image>
								积分
							</view>
						</view>
						<view class="member-item">
							<view style="font-weight: 600">{{ userBalance.balance && userBalance.balance.toFixed(2) }}</view>
							<view style="margin-top: 20rpx; display: flex; align-items: center">
								<image src="@/static/images/component/qianbaoyue.png"></image>
								余额
							</view>
						</view>
						<view class="member-item">
							<view style="font-weight: 600">
								{{ userBalance.giftBalance && userBalance.giftBalance.toFixed(2) }}
							</view>
							<view style="margin-top: 20rpx; display: flex; align-items: center">
								<image src="@/static/images/component/liwu.png"></image>
								赠送余额
							</view>
						</view>
						<view class="member-item">
							<view style="font-weight: 600">{{ userBalance.couponCount || 0 }}</view>
							<view style="margin-top: 20rpx; display: flex; align-items: center">
								<image src="@/static/images/component/youhuiquan.png"></image>
								优惠券
							</view>
						</view>
					</view>
					<!-- <view class="fisze-24 mt-20">
							<w-barcode :options="options" />
							<view class="mt-10 text-align-center">{{userInfo.number}}</view>
						</view>-->
				</view>
			</view>
		</view>
		<view class="content" v-if="userInfo.id">
			<!-- 我的资料 start-->
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="$u.route('/pages/user/information/information')">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-shenfen" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">我的资料</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="$u.route('/pages/user/coupon/coupon')">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-qiaquan" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">红包卡券</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<!-- 我的资料 end-->

			<!-- 地址管理start -->
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="$u.route('/pages/user/address/address')">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-qiaquan" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">地址管理</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<!-- 地址管理end -->
			<view class="flex justify-between bg-white align-center padding-30 border-radius-10 mt-20" @click="$u.route('/pages/user/recharge/recharge')">
				<view class="flex align-center">
					<uni-icons custom-prefix="iconfont" type="icon-qiaquan" color="#F1BA48" size="28" />
					<text class="fsize-28 ml-20">会员充值</text>
				</view>
				<uni-icons custom-prefix="iconfont" type="icon-right" />
			</view>
			<!-- 会员充值end -->
		</view>

		<view class="banner" v-if="userInfo.id">
			<view class="banner-content" @click="$u.route('/pages/user/recharge/recharge')">
				<image type="image" src="@/static/images/my/my-banner.png" alt="" />
			</view>
		</view>

		<!-- <view class="layout" v-if="isLogin && userInfo.id">
			<button @click="LAY_OUT()" type="primary" plain="true">退出登录</button>
		</view> -->
		<AdvertisingPupop @close="showPopup = false" :showPopup="showPopup" :popupProps="popup[2]" />
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import AdvertisingPupop from '@/components/advertising-popup/advertising-popup.vue';
import utils from '@/common/util.js';
export default {
	components: { AdvertisingPupop },
	data() {
		return {
			boardcast: [],
			isShow: false,
			system: utils.getSystemInfo(),
			showPopup: false
		};
	},
	computed: {
		...mapState(['isLogin', 'userInfo', 'userBalance', 'stock', 'popup']),
		options() {
			return {
				width: 600,
				height: 100,
				code: this.userInfo.number
			};
		}
	},
	onLoad() {
		this.options.code = this.userInfo.number;
		if (this.popup != null) {
			// 判断是否展示弹窗广告
			if (!this.popup[2].showPosition) {
				// 以前没有配置的直接默认在当前页面
				if (this.popup[2].image) {
					this.showPopup = true;
					uni.hideTabBar();
				}
			} else {
				if (this.popup[2].showPosition.some((item) => item === 3) && this.popup[2].isShow) {
					this.showPopup = true;
					uni.hideTabBar();
				}
			}
		}
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.setNavigationBarTitle({
			title: ' '
		});
		uni.setNavigationBarColor({
			backgroundColor: '#F0B643'
		});
		// #endif
	},
	onShow() {
		this.getUserBalance();
	},
	methods: {
		...mapMutations(['LAY_OUT', 'SET_USERBALANCE']),
		integrals() {
			if (!this.isLogin || this.userInfo.id === 0) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		async getUserBalance() {
			if (this.userInfo.id) {
				const res = await this.$api.getBalance();
				this.SET_USERBALANCE(res.data);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.head {
	width: 750rpx;
	height: 500rpx;
	background: linear-gradient(34deg, #f3c45d, #edac2f);
	padding: 244rpx 30rpx 0 30rpx;

	.user-panel {
		margin-top: 10rpx;
		border-radius: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		position: relative;

		.is-user {
			display: flex;

			.tips {
				overflow: hidden;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
				background-color: #f3c45d;
				// position: absolute;
				// top: -40rpx;
				// right: 30rpx;

				image {
					width: 100%;
				}
			}

			.user-info {
				flex: 1;
				margin-left: 20rpx;
			}

			.user-code {
				margin-right: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.not-logged-in {
			padding: 86rpx;
		}
	}
}

.content {
	padding: 0 30rpx;
	margin-top: 150rpx;

	.wallet {
		margin-top: -40rpx;
	}
}

.layout {
	padding: 80rpx;
}

.member-info {
	padding: 40rpx 0 20rpx;
	display: flex;

	& > view {
		// background-color: #f2f8f7;
		text-align: center;
		width: 25%;
		height: 100rpx;

		image {
			margin-right: 10rpx;
			width: 35rpx;
			height: 35rpx;
		}
	}
}

.banner {
	padding: 30rpx;

	.banner-content {
		height: 300rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}
.member-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
